<template>
  <div class="peopleFlow-box">
    <div class="peopleFlow-content">
      <p class="peopleFlow-name">重点区域人流量</p>
      <!--重点区域人流量地点分类占比-->
      <div class="p-box">
        <div class="p-Num" v-for="(item,i) in locationRatio" :key="item.id">
          <div class="p-head"><i>{{item.name}}</i></div>
          <div class="pre-warn">
            <ul class="type-length">
              <template>
                <li :style="{background: legendColor[i], width: chooseWidth(i)}"></li>
              </template>
            </ul>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'peoplePass',
  data () {
    return {
      locationRatio: [{ name: '小区花园', num: 78 }, { name: '小区北门', num: 42 }, { name: '小区广场', num: 70 }, { name: '小区南门', num: 60 }],
      legendColor: ['#F5A623', '#50E3C2', '#F8E71C', '#50E3C2']
    }
  },

  mounted () {
    // this.init();
  },
  methods: {
    // 初始化占比
    chooseWidth (i) {
      var w = this.locationRatio[i].num
      return w + 'px'
    }
  }
}
</script>

<style scoped>
.peopleFlow-box {
  width: 100%;
  margin-bottom: 10px;
}

.peopleFlow-content {
  background: rgba(43, 54, 72, 0.7);
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
  width: 100%;
  padding: 20px;
  box-sizing: border-box;
  position: relative;
}

.p-box {
  width: 100%;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}

.p-Num {
  width: 48%;
  height: 40px;
  margin-bottom: 10px;
  /*padding: 6.5%;*/
}

.p-head {
  color: #9facc3;
  height: 20px;
  font-size: 12px;
  font-family: PingFangSC-Semibold;
}

.p-head i {
  float: left;
  font-size: 12px;
  font-style: normal;
}

.pre-warn {
  width: 100%;
  height: 10px;
}

.peopleFlow-name {
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  margin-bottom: 10px;
  float: left;
}
.type-length {
  width: 100%;
  margin-top: 5px;
  background: rgba(0, 0, 0, 0.2);
}

.type-length li {
  list-style: none;
  height: 10px;
  background: #ff9900;
  margin-bottom: 10px;
  margin-right: 2px;
}
</style>
